iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0

我們知道寫程式有個階段就是一個輸入、運算處理、輸出
網頁是由HTML、CSS、Javascript三個語言所組成
HTML 裝著要呈現在網頁上的資料,例如:文字、圖片
CSS 可以修改資料的樣式,例如:修改文字顏色、修改圖片大小、一些網頁動畫
Javascript 可以對網頁做動態地修改,例如:點擊按鈕將商品加入購物車、更客製化的網頁動畫

其中 Javascript 就會有很多運算的部分需要學習。
通常 HTML、CSS 都是寫死的,也就是一開始就要設定好,按到網頁的哪顆按紐,就會發生什麼事情。
而 Javascript 就可以比較有彈性,例如可以根據使用者點了哪個商品,就將那個商品加入購物車。
加入購物車這個功能,其實就是自動偵測我們點了那些商品,並且自動在網頁的購物車頁面畫出我們點了什麼商品。
所以購物車頁面,並不是寫死的,而是透過 Javascript 自動在網頁上畫出來的。

那麼 Javascript 要如何自動修改網頁、在網頁上自己畫東西出來呢?

可以透過 HTML DOM 來修改網頁。

DOM ( Document Object Model)

DOM(Document Object Model,文件物件模型),就是將 HTML 以樹狀結構來表現的模型,組合起來的樹狀圖,我們稱之為「DOM Tree」

聽起來很複雜,可以把他當作類似物件的東西。因為網頁裡面包含了很多複雜的資料,所以我們只要使用 DOM 裡面提供的方法(也就是函式),就可以更改網頁的資料。
用起來的感覺就像這樣

window.document.body.innerHTML="Hello World";

這個指令可以將網頁全部的畫面改成 "Hello World"
這個指令就是使用 innerHTML 這個方法將資料"Hello World"放進 document.body 這個地方
感覺就像我們使用方法修改了 document.body 這個物件。

那來一個簡單的練習
可以使用其他編譯器來練習,或者使用JS Bin這個網站
https://jsbin.com/

準備一個 HTML 檔案,使用 button 標籤寫一個按紐叫做 Change

<html>
<head>
<script>
    
</script>
</head>
<body>
 <button>Change</button>
</body>
</html>

接著我希望在我點擊這個按鈕就可以對網頁做一些修改,我希望點下這個按鈕之後就可以啟動函式。

我準備一個 change 函式

<html>
<head>
<script>
    function change(){
        window.document.body.innerHTML="Hello World";
    }
</script>
</head>
<body>
 <button>Change</button>
</body>
</html>

我想修改的地方是 window.document.body
我修改的方法是 innerHTML
我要放的值是 "Hello World"
執行這個程式碼後,網頁畫面就會變成 "Hello World"

那麼我們希望按下按鈕後就啟動函式,我們需要使用「事件處理」
在 button 標籤,建立一個 click 事件
<button onclick="change();">Change</button>

<html>
<head>
<script>
    function change(){
        window.document.body.innerHTML="Hello World";
    }
</script>
</head>
<body>
 <button onclick="change();">Change</button>
</body>
</html>

這樣就設定好了可以再按下按紐時啟動 change() 函式
這樣我們在網頁中按下 button 標籤,也就是 change 按鈕,畫面就會變成 Hello World

另一個範例

<html>
<head>
<script>
    function change(){
        
    }
</script>
</head>
<body>
 <div>
     Today is good day.
 </div>
 <button onclick="change();">Change</button>
</body>
</html>

現在我有一段文字 Today is good day.
我希望按下按鈕後,可以替換裡面的文字,將 good 替換成 bad。

我可以用一個標籤將我想替換的範圍包圍起來
並且給這段標籤加上 id 屬性,給一個值 word
Today is <span id="word">good</span> day.

<html>
<head>
<script>
    function change(){
        
    }
</script>
</head>
<body>
 <div>
     Today is <span id="word">good</span> day.
 </div>
 <button onclick="change();">Change</button>
</body>
</html>

接著我就可以用 HTML DOM 提供的方法,去選取到我想修改的地方
我使用 document.getElementById() 方法,將 id 的值當作參數放進去
就會選取到我想修改的地方
我將我選取到的標籤放進變數裡

var target=window.document.getElementById("word");

接著我就可以使用 innerHTML 修改文字內容,將 good 替換成 bad

target.innerHTML="bad";

整段程式碼看起來就會像這樣

<html>
<head>
<script>
    function change(){
        var target=window.document.getElementById("word"); // 使用 id word 獲取 span 標籤
        target.innerHTML="bad"; // 修改 span 標籤內文
    }
</script>
</head>
<body>
 <div>
     Today is <span id="word">good</span> day.
 </div>
 <button onclick="change();">Change</button>
</body>
</html>

上一篇
[想試試看JavaScript ] 物件 建構式
下一篇
[想試試看JavaScript ] 瀏覽器裡的 Javascript
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言